<template>
    <div class="NewStudents" @click="noneDialogVisible">
        <div @click.stop>
            <div class="title">
                添加学生
            </div>
            <span><a
                :href="server.ghyComputerIp + 'static/csv/批量向课程中添加学生模板.csv'">批量添加模板下载</a></span>

            <el-upload
                ref="newStudentUploadEle"
                class="upload-demo"
                :action="server.ghyComputerIp+'teacher/subject_student'"
                :data="uploadData"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="upSuccess"
            >
                <el-button type="primary">CSV批量添加</el-button>

            </el-upload>
            <el-divider>单独添加学生</el-divider>

            <div class="from" v-show="!isBatch">
                <div>
                    <span>学号</span>
                    <input v-model="studentInfo.studentId" type="text" placeholder="学生学号, 必填">
                </div>
                <div>
                    <span>姓名</span>
                    <input v-model="studentInfo.studentName" type="text" placeholder="学生姓名, 必填">
                </div>
                <div>
                    <span>班级</span>
                    <input v-model="studentInfo.studentClass" type="text" placeholder="学生所在班级, 必填">
                </div>
            </div>
            <div>

            </div>
            <div v-show="!isBatch" @click="newOneStudent" class="button"
                 :class="[studentInfo.studentClass&&studentInfo.studentId&&studentInfo.studentName?'button-1':'']">新建
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useAllStore } from "@/stores/all";
import { ElMessage, ElNotification } from "element-plus";
import { useServerStore } from "@/stores/server/server";
import workApi from "@/http/work/workApi";

const newStudentUploadEle = ref(null)
const server = useServerStore()
const all = useAllStore()
const uploadData = reactive({
    subject_name: all.courseContainerInfo.name
})
const headers = {
    "token": localStorage.getItem('token')
}

function upSuccess(res) {
    // 批量上传上传成功
    all.setCourseContainerInfo("studentsInfo", res.data["students"])
    all.setCourseContainerInfo("filters", res.data["filters"])
    newStudentUploadEle.value.clearFiles();
    ElMessage({
        message: res["tipElm"],
        type: 'success',
    })
    isBatch.value = false
    all.setDialog('')
}

const isBatch = ref(false)

function beforeUpload() {
    // 文件上传中
    ElNotification({
        title: 'Success',
        message: '文件上传中,需要一定时间,请耐心等待.',
        type: 'success',
    })
    isBatch.value = true
}

// 提交单个学生
const studentInfo = reactive({
    studentClass: "",
    studentId: null,
    studentName: "",
})

function newOneStudent() {
    if (isNaN(studentInfo.studentId)) {
        ElMessage.error('学生学号应为数字');
        return
    }
    if (studentInfo.studentClass && studentInfo.studentId && studentInfo.studentName) {
        let i = studentInfo.studentId / 1000000000
        if (i < 1 || i > 10) {
            ElMessage.error('请检查学号长度是否正确');
            return;
        }
        workApi.post("teacher/subject_student_one", {
            subject_name: all.courseContainerInfo.name,
            student: studentInfo
        }).then((res) => {
            console.log(res)
            all.setCourseContainerInfo("studentsInfo", res.data['students'])
            all.setCourseContainerInfo("filters", res.data['filters'])
            all.setDialog('')
        });
        return;
    }
    ElMessage.error('你是不是还没填好啊');
}

function noneDialogVisible() {
    isBatch.value = false
    all.setDialog("")
}
</script>

<style scoped lang="less">
.NewStudents {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: black;
    background-color: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
    z-index: 2;

    > div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25%;
        min-width: 300px;
        height: 540px;
        border-radius: 20px;
        background-color: white;

        .title {
            height: 40px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            font-weight: 600;
            border-bottom: 1px solid black;
        }

        > span {
            display: block;
            width: 115px;
            margin: auto;
            font-size: 14px;
            color: #7c858f;
            cursor: pointer;
        }

        .upload-demo {
            display: flex;
            flex-direction: column;
        }

        .from {
            > div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 20px 0;

                span {

                }

                input {
                    width: 80%;
                    border-radius: 15px;
                    background-color: rgba(0, 0, 0, .1);
                }
            }

        }

        .button {
            width: 80%;
            height: 50px;
            margin: 50px auto;
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            background-color: rgba(0, 0, 0, .1);
        }

        .button-1 {
            background-color: #4f95f5;
        }
    }
}
</style>